<template>
	<view class="search">
		<!-- 搜索框 -->
		<uni-search-bar placeholder="自定义背景色" bgColor="#FFFFFF" @confirm="search" cancel-text="搜索" @cancel="search" />
		<!-- 历史记录 -->
		<view class="history">
			<view class="item" v-for="item,index in searchHistory" :key="index+item" @click="searchBtn(item)">
				{{item}}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	let searchText = ref("")
	let searchHistory = ref(["道劳村", "红庆河", "宏曲"])
	// 搜索事件
	function search(e) {
		console.log(e);
		searchText.value = e.value
		uni.navigateTo({
			url: `/pages/detailsPage/detailsPage?name=${searchText.value}`,
		})
	}
	// 点击按钮跳转
	function searchBtn(item) {
		searchText.value = item
		uni.navigateTo({
			url: `/pages/detailsPage/detailsPage?name=${searchText.value}`,
		})
	}
</script>

<style scoped lang="scss">
	.search {
		background-color: #eee;
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		padding: 0 2vw;
	}

	.history {
		display: flex;
		justify-content: start;
		flex-wrap: wrap;

		.item {
			// width: 20vw;
			padding: 5px 20px;
			border: 1px solid #ccc;
			text-align: center;
			background-color: white;
			margin: 10px 10px 0 0;
			border-radius: 20px;
		}
	}
</style>